<script setup lang="ts">
//表单数据
import {reactive, ref} from "vue";
import {useUserStore} from "@/stores/user";
const userStore=useUserStore()
let registerForm=reactive({
  username: '',
  password: '',
  confirmPassword: '',
  email: '',
  phonenumber: ''
})
const registerRef=ref()

const validateConfirmPassword=(rule: any,value:string,callback:any)=>{
  if(value===''){
    callback(new Error('请输⼊确认密码'))
  }else if(value!==registerForm.password){
    callback(new Error('密码不一致'))
  }else{
    callback()
  }
}
let registerRules=reactive({
  username: [
    { required: true, message: '请输⼊⽤户名', trigger: 'blur' },
    { min: 3, max: 10, message: '⽤户名长度在 3 到 20 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输⼊密码', trigger: 'blur'},
    { min: 6,max: 20, message: '密码长度不能小于 6 个字符,不能大于20个字符', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请输⼊密码', trigger: 'blur'},
    {validator:validateConfirmPassword}
  ],
  email: [
    { type: 'email', message: '请输⼊正确的邮箱地址',trigger:'blur'}
  ],
  phonenumber: [
    { pattern: /^1[3-9]\d{9}$/, message: '⼿机号长度为 11 个字符', trigger:['blur','change']}
  ],
})
let handleRegister = async () => {
  /**
   * 表单验证函数
   * 该函数用于触发表单验证，并在验证完成后执行回调函数
   * @param {Function} callback - 验证完成后的回调函数
   * @returns {void}
   */
  if (!registerRef.value) return  // 验证表单
  await registerRef.value.validate(async (valid: boolean) => {
    if (!valid) return
    registerRef.value.validate(() => {
      // 验证完成后输出表单数据
      console.log(registerForm)
      // 发送注册表单信息
      userStore.register(
          {
            username: registerForm.username, // 用户名
            password: registerForm.password, // 密码
            email: registerForm.email, // 邮箱
            phonenumber: registerForm.phonenumber // 手机号
          }
      )
    })
  })
}
</script>

<template>
  <div class="register">
     <el-form
       ref="registerRef"
       class="register-form"
       :model="registerForm"
       :rules="registerRules"
     >
 <h3 class="title">⽤户注册</h3>
     <el-form-item prop="username">
     <el-input
       type="text"
       size="large"
       auto-complete="off"
       placeholder="请输⼊⽤户名"
       prefix-icon="User"
       v-model="registerForm.username"
     >
     </el-input>
     </el-form-item>
   <el-form-item prop="password">
     <el-input
       type="password"
       size="large"
       auto-complete="off"
       placeholder="请输⼊密码"
       prefix-icon="Lock"
       show-password
       v-model="registerForm.password"
     >
     </el-input>
   </el-form-item>
  <el-form-item prop="confirmPassword">
     <el-input
       type="password"
       size="large"
       auto-complete="off"
       placeholder="请确认密码"
       prefix-icon="Lock"
       show-password
       v-model="registerForm.confirmPassword"
     >
     </el-input>
   </el-form-item>
  <el-form-item prop="email">
     <el-input
         type="email"
         size="large"
         auto-complete="off"
         placeholder="请输⼊邮箱（可选）"
         prefix-icon="Message"
         v-model="registerForm.email"
     >
     </el-input>
  </el-form-item>
  <el-form-item prop="phonenumber">
     <el-input
       type="text"
       size="large"
       auto-complete="off"
       placeholder="请输⼊⼿机号（可选）"
       prefix-icon="Phone"
       v-model="registerForm.phonenumber"
     >
     </el-input>
 </el-form-item>
  <el-form-item style="width:100%;">
     <el-button
       size="large"
       type="primary"
       style="width:100%;"
       @click="handleRegister"
     >
     <span>注 册</span>
     </el-button>
   </el-form-item>
  <div class="login-link">
     <span>已有账号？</span>
     <el-link type="primary" >
     ⽴即登录
     </el-link>
     </div>
 </el-form>
  </div>
</template>

<style scoped lang="scss">
  .register {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-image: url("@/assets/image/bg.png");
    background-size: cover;

   .register-form {
     border-radius: 6px;
     background: #ffffff;
     width: 400px;
     padding: 25px 25px 25px 25px;
     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

    .title {
      margin: 0px auto 30px auto;
      text-align: center;
      color: #707070;
      font-size: 20px;
      font-weight: bold;
    }

    .el-input {
      height: 40px;

      :deep(.el-input__wrapper) {
        padding: 0 15px;
      }
    }

    .login-link {
      text-align: center;
      margin-top: 20px;
      font-size: 14px;
      color: #606266;
    }
  }
  }

</style>